<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>校内实践课题</el-breadcrumb-item>
    </el-breadcrumb>

    <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">查看校内实践课题</h2>

    <!-- 选择框和搜索栏 -->
    <!-- <el-row :gutter="20" style=" margin-top: 20px; ">
      <el-col :span="8">
        <div class="grid-content ep-bg-purple">
          <el-select v-model="value" class="m-2" placeholder="选择类型">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content ep-bg-purple">
          <el-input v-model="input1" class="w-50 m-2" placeholder="搜索" :prefix-icon="Search"
            style="width: auto; margin-right: 10px;" />
          <el-button type="primary" :icon="Search">Search</el-button>
        </div>
      </el-col>
    </el-row> -->
    <!-- 表格 -->
    <div style="margin: 3% 5% 3% 5%;">
      <el-table :data="filterTableData" height="550" style="width: 100%">
        <el-table-column prop="startDate" label="发布日期" :formatter="formatDate" />
        <el-table-column prop="taskName" label="题目" />
        <el-table-column prop="majorName" label="专业" />
        <el-table-column prop="courseName" label="实践课程" />
        <el-table-column prop="memberMax" label="任务数" />
        <el-table-column prop="adviserName" label="发布教师" />
        <el-table-column fixed="right" width="150">
          <template #header>
            <el-input v-model="search" size="small" placeholder="查询题目" />
          </template>
          <template #default="scope">
            <el-button link type="primary" size="small" @click="toPost(scope.row.publishId)">详情</el-button>
            <el-button link type="primary" size="small" @click="innerTopic(scope.row.publishId)">选报</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script setup>
import { ArrowRight, Calendar, Search } from '@element-plus/icons-vue'
import { ref, computed, onBeforeMount } from 'vue'
import requests from '@/api/ajax'
import { useRouter } from 'vue-router'

const router_useRouter = useRouter()
function toPost(id) {
  router_useRouter.push({
    path: 'stuInnerDetail',
    query: { publishId: id }
  })
  // $router.push(`courseTaskDetail/${scope.row.practicalId}`)
}

onBeforeMount(() => {

  const asd = requests({ url: "/students/innerPublish", method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    const abc = res.rdata
    innerTask.value = abc

  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });

})

//table中的搜索框
const search = ref('')
const filterTableData = computed(() =>
  innerTask.value.filter(
    (data) =>
      !search.value ||
      data.taskName.toLowerCase().includes(search.value.toLowerCase())
  )
)


const value = ref('')

const input1 = ref('')
// 下拉框选项
const options = [
  {
    value: 'Option1',
    label: '算法设计',
  },
  {
    value: 'Option2',
    label: '基础编程',
  },
  {
    value: 'Option3',
    label: '逻辑判断',
  },
  {
    value: 'Option4',
    label: '通用',
  },
]
// 表格数据
const innerTask = ref([
  {
    publishId: '',
    memberMax: '',
    taskName: "",
    content: "",
    scaleRule: "",
    startDate: "",
    endDate: "",
    planId: '',
    courseId: '',
    courseName: "",
    majorName: "",
    enrolDate: "",
    practicalId: '',
    classId: '',
    className: "",
    adviserId: '',
    adviserName: "",
    teachId: '',
    teachName: "",
    practicalType: '',
    onloadDate: ""
  }
])

//时间格式化
function formatDate(row, column, cellValue, index) {
  let format = 'YYYY-mm-dd'
  let date = new Date(cellValue);
  const dataItem = {
    'Y+': date.getFullYear().toString(),
    'm+': (date.getMonth() + 1).toString(),
    'd+': date.getDate().toString(),
  }
  Object.keys(dataItem).forEach((item) => {
    const ret = new RegExp(`(${item})`).exec(format);
    if (ret) {
      format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
    }
  });
  /*  dateFilters.value = format */
  //时间选择栏
  /*  let dateFilters = ref([])
   dateFilters = format */
  // for(let i=0 ; i<myPublish.length;i++){
  //   const obj = ref([])
  //   obj.text = 
  /*   myPublish.value.courseDate = ref(format);
    console.log(myPublish.value.courseDate) */
  return format
}

function innerTopic(publishId) {
  const id = publishId
  const asd = requests({ url: "/students/team/innerTopic/" + id, method: "get", }).then(res => {
    //存储用户信息到浏览器toke
    if (res.code === 20071) {
      alert(res.msg)
    } else if (res.code === 20070) {
      alert(res.msg)
    } else {
      alert('选报出现错误')
    }

  })
    .catch(err => {
      console.error(err.data);
      // 登录请求失败后的操作
    });
}

</script>
<style>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>